<template>
  <div class="basic_info">
    <div class="info_operation_btn">
      <div class="btn_left">
        <el-button
          type="primary"
          :disabled="!buttonsPermissions.XinZeng"
          :class="!buttonsPermissions.XinZeng ? 'disabled_button' : ''"
          @click="onShowAdd"
        >新增(N)</el-button>
        <el-button :disabled="!buttonsPermissions.DaoRu" @click="importExcel">导入</el-button>
        <!-- <el-select v-model="importValue">
          <el-option
            label="导入"
            value="导入"
            :disabled="!buttonsPermissions.DaoRu"
            :style="!buttonsPermissions.DaoRu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="importExcel"
          ></el-option>
          <el-option
            label="导出"
            value="导出"
            :disabled="!buttonsPermissions.DaoChu"
            :style="!buttonsPermissions.DaoChu ? 'pointer-events: none; font-size: 12px' : 'font-size: 12px'"
            @click.native="exportExcel"
          ></el-option>
        </el-select>-->
        <el-select v-model="enableValue" style="width: 80px">
          <el-option
            style="font-size: 12px"
            @click.native="onBatchChangeStatus(enableValue)"
            v-for="item in enableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          :disabled="!buttonsPermissions.ShanChu"
          :class="!buttonsPermissions.ShanChu ? 'disabled_button' : ''"
          @click="onBatchDelete"
        >批量删除</el-button>
        <el-checkbox v-model="queryData.userStatus">显示离职员工</el-checkbox>
      </div>
      <div class="btn_right">
        <el-input @change="onQuery" v-model="queryData.queryParam" placeholder="请输入员工姓名\编号\部门\拼音码\手机号"></el-input>
        <el-button type="primary" @click="onQuery">搜索</el-button>
        <el-button @click="onRefresh">刷新</el-button>
        <i @click="onShowColumn" class="set_up el-icon-s-tools"></i>
      </div>
    </div>
    <div class="info_content_div">
      <div class="div_tree" :class="editTreeDataSta == false ? 'new_div_tree_width' : ''">
        <div class="tree_div1">
          <p>部门类别</p>
          <p v-if="editTreeDataSta" @click="editTreeDataSta = false">编辑</p>
          <el-button v-else type="primary" @click="editTreeDataSta = true">完成编辑</el-button>
        </div>
        <div class="tree_input">
          <p>
            <input type="text" placeholder="查找" v-model="filterText" />
            <span>
              <i class="el-icon-search"></i>
            </span>
          </p>
        </div>
        <div class="tree_structure">
          <el-tree
            ref="tree"
            :data="treeData"
            node-key="id"
            :props="defaultProps"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            :filter-node-method="filterNode"
          >
            <span v-if="editTreeDataSta == false" class="tree_node" slot-scope="{ node, data }">
              <span>{{ node.label }}</span>
              <span v-if="nowLabel == data.id" class="show_nodex">
                <i class="el-icon-circle-plus-outline" @click.stop="onAddTree(data)"></i>
                <i
                  v-if="data.id !== ''"
                  class="el-icon-edit-outline"
                  @click.stop="onEditTree(node, data)"
                ></i>
                <i v-if="data.id !== ''" class="el-icon-delete" @click.stop="onDeleteTree(data)"></i>
              </span>
            </span>
            <span v-else class="tree_node" slot-scope="{ node }">
              <span>{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
      </div>
      <div class="div_table" :class="editTreeDataSta == false ? 'new_div_table_width' : ''">
        <div class="table_content">
          <el-table
            :data="tableData.records"
            height="100%"
            border
            tooltip-effect="dark"
            highlight-current-row
            :header-cell-style="{ background: '#EDEDED', color: '#666666', textAlign: 'center' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" :resizable="false"></el-table-column>
            <el-table-column
              label="操作"
              :resizable="false"
              style="width: 80px;"
              v-if="buttonsPermissions.ShanChu && buttonsPermissions.XiuGai"
            >
              <template slot-scope="scope">
                <i
                  v-if="buttonsPermissions.XiuGai"
                  @click="onEditRow(scope.row)"
                  class="el-icon-edit-outline"
                ></i>
                <i
                  v-if="buttonsPermissions.ShanChu"
                  @click="onDeleteRow(scope.row)"
                  class="el-icon-delete"
                ></i>
              </template>
            </el-table-column>
            <template v-for="(item, i) in columnData">
              <el-table-column
                align="center"
                :resizable="false"
                :show-overflow-tooltip="true"
                :key="i"
                :prop="item.props"
                :label="item.zidingyiName ? item.zidingyiName : item.morenName"
                v-if="item.zidingyiState"
                min-width="150px"
                :width="item.cellWidth"
              >
                <template slot-scope="scope">
                  <div>{{ scope.row[item.props] }}</div>
                </template>
              </el-table-column>
            </template>
            <el-table-column label="状态" :resizable="false" fixed="right">
              <template slot-scope="scope">
                <el-switch
                  @change="onChangeStatus(scope.row)"
                  v-model="scope.row.isAllowLogin"
                  active-color="#1A93FA"
                  inactive-color="#D3D2D2"
                ></el-switch>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="total_record">
          <p>合计</p>
          <p>共{{ tableData.total }}条记录</p>
        </div>
        <div class="table_pagination">
          <div class="pagination_div">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100, 200]"
              :page-size="pagesize"
              layout="jumper, prev, pager,next, sizes"
              :total="tableData.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 列配置弹框 -->
    <CConfiguration
      ref="setColumnRef"
      :columnDataArr="columnData"
      :defaultColumnDataArr="defaultColumnData"
      orderType="员工信息"
      @onSaveColumn="onSaveColumn"
    ></CConfiguration>
    <!-- 新增树形结构数据弹框 -->
    <el-dialog
      :title="this.newTreeData.module.name == 'deptName' ? '部门' : '类别信息'"
      :visible.sync="showNewTree"
      width="480px"
    >
      <NewCategory
        :newTreeData="newTreeData"
        @onSaveTreeChanges="onSaveTreeChanges"
        @onCancelTree="showNewTree = false"
      ></NewCategory>
    </el-dialog>
    <!-- 新增员工弹框 -->
    <!-- @dialogVisibleClose="onCloseAddStaff" -->
    <DialogStaffAdd ref="staffAddRef" :newData="newData" @onAddSubmit="onAddStaff"></DialogStaffAdd>
    <!-- 提醒弹框 -->
    <PopupReminder
      ref="reminderRef"
      :tipsData="tipsData"
      @dialogVisibleClose="onNo"
      @onConfirm="onYes"
    ></PopupReminder>
    <!-- 成功弹框 -->
    <PopupSuccess ref="successRef" :tipsData="tipsData"></PopupSuccess>
    <PopupImportSuccess ref="successImportRef" :tipsData="tipsData"></PopupImportSuccess>
    <!-- 导入 -->
    <DialogImport
      ref="daoru"
      :titles="columnData"
      url="/dept/xghAccountBookDept/importExcel"
      :isGoods="true"
      @importData="importData"
      @downloadTemplate="exportExcel"
    ></DialogImport>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import CConfiguration from '@/components/c_column/columnConfiguration1'
import NewCategory from '@/components/c_category/NewCategory'
import DialogStaffAdd from '../../components/dialogStaffAdd'
import PopupReminder from '../../components/popupReminder'
import PopupSuccess from '../../components/popupSuccess'
import PopupImportSuccess from '../../components/popupImportSuccess'
import DialogImport from '@/components/c_Import/index1'
import { postAction, getAction, putAction, deleteAction, downPostFile } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Vue from 'vue'
import { USER_INFO, ACCOUNT_BOOK } from '@/store/mutation-types'
// 导入调用处理权限数据方法
import { handlePermissions, handleOtherPerms } from '@/utils/index'
export default {
  mixins: [JeecgListMixin],
  name: 'staffInfo',
  components: {
    CConfiguration,
    NewCategory,
    DialogStaffAdd,
    PopupReminder,
    PopupSuccess,
    PopupImportSuccess,
    DialogImport,
  },
  computed: {
    ...mapGetters(['name']),
    buttonsPermissions () {
      return handlePermissions('员工信息')
    },
  },
  created () {
    this.getData()
  },
  watch: {
    'queryData.userStatus': {
      deep: true,
      handler () {
        this.getTableData()
      },
    },
    filterText (val) {
      this.$refs.tree.filter(val)
    },
  },
  data () {
    return {
      // 传递给弹框的数据
      tipsData: {
        tipsState: '',
        tipsWords: '',
        tipsMark: '',
      },
      // 筛选条件
      queryData: {
        queryParam: '',
        userStatus: false,
        deptId: undefined,
      },
      // 新增数据------------
      defaultData: {
        realname: '',
        sex: '',
        birthday: '',
        maritalStatus: '',
        personNo: '',
        pinYinCode: '',
        userDeptId: '', //员工部门id
        deptName: '',
        userRoleId: '', //角色id
        roleName: '',
        userPostId: '', //职务岗位id
        postName: '',
        idNumber: '',
        phone: '',
        telephone: '',
        currentAddress: '',
        homeAddress: '',
        isResign: 0,
        entryDate: '',
        backup: '',
        isAllowLogin: true, //允许登录账套
        username: '',
        password: '',
      },
      newData: {
        realname: '',
        sex: '',
        birthday: '',
        maritalStatus: '',
        personNo: '',
        pinYinCode: '',
        userDeptId: '', //员工部门id
        deptName: '',
        userRoleId: '', //角色id
        roleName: '',
        userPostId: '', //职务岗位id
        postName: '',
        idNumber: '',
        phone: '',
        telephone: '',
        currentAddress: '',
        homeAddress: '',
        isResign: 0,
        entryDate: '',
        backup: '',
        isAllowLogin: true, //允许登录账套
        username: '',
        password: '',
      },
      pagesize: 20, //每页的数据条数
      currentPage: 1, //默认开始页面
      nowLabel: '',
      tableData: {
        records: [],
        total: 0
      },
      showNewTree: false, //显示树形结构数据新增弹框
      // 传递数据给新增树形结构组件
      newTreeData: {
        module: {
          name: '',
        },
      },
      sectionName: '', //类别查找值
      // 列配置数据
      defaultColumnData: [],
      columnData: [
        {
          morenName: '姓名',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'realname',
          isRequired: true,
        },
        {
          morenName: '人员编号',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'personNo',
        },
        {
          morenName: '拼音码',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'pinYinCode',
        },
        {
          morenName: '性别',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'sex_dictText',
        },
        {
          morenName: '出生年月',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'birthday',
        },
        {
          morenName: '婚姻状况',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'maritalStatus_dictText',
        },
        {
          morenName: '所属部门',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'deptName',
        },
        {
          morenName: '职务/岗位',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'postName',
        },
        {
          morenName: '角色',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'roleNameGroup',
        },
        {
          morenName: '身份证号',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'idNumber',
        },
        {
          morenName: '手机',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'phone',
        },
        {
          morenName: '联系电话',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'telephone',
        },
        {
          morenName: '现住址',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'currentAddress',
        },
        {
          morenName: '家庭住址',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'homeAddress',
        },
        {
          morenName: '员工状态',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'isResign_dictText',
        },
        {
          morenName: '入职时间',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'entryDate',
        },
        {
          morenName: '备注',
          zidingyiName: '',
          morenState: true,
          cellWidth: '150px',
          zidingyiState: true,
          noModify: false,
          props: 'backup',
        },
      ],
      importValue: '导入',
      enableOptions: [
        {
          value: '启用',
          label: '启用',
        },
        {
          value: '停用',
          label: '停用',
        },
      ],
      enableValue: '启用',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      editTreeDataSta: true, //编辑单位类别状态
      dialogVisible: false, // 新增弹框
      editIndex: -1, // 记录需要修改行的下标
      batchData: [], // 存储多选的数据
      nowTreeId: '', //暂存删除树形节点id
      nowData: {}, //暂存当前行数据
      nowStatus: '', //暂存启用禁用下拉框状态
      nowDataId: '', //暂存删除表数据id
      nowDataStatus: '', //暂存新增/修改表状态
      updateId: '', // 修改列配置时返回的id
      filterText: '',
      url: {
        userList: '/dept/xghAccountBookDept/getDeptUsers',
        api: '员工信息',
        exportXlsUrl: '/dept/xghAccountBookDept/exportExcel'
      }
    }
  },
  mounted () {
    this.selectTitle()
  },
  methods: {
    filterNode (value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 初始化查询列配置值
    async selectTitle () {
      let obj = await this.$setColumn.selectColumn(this.url.api)
      if (obj.code === 200) {
        this.updateId = obj.updateId
        this.columnData = obj.columnData
      } else if (obj.code === 500) {
        let id = await this.$setColumn.addColumn(this.url.api, this.$options.data().columnData)
        this.updateId = id
      }
    },
    // 修改列配置后保存修改后的值
    async onSaveColumn (value) {
      this.columnData = value
      let res = await this.$setColumn.editColumn(this.url.api, this.columnData, this.updateId)
      if (res.code == 200) {
        this.$elMessage.success(res.message)
      } else {
        this.$elMessage.error(res.message)
      }
    },
    // 获取数据
    getData () {
      this.getTreeData()
      this.getTableData()
    },
    // 获取类别数据
    getTreeData () {
      getAction('/dept/xghAccountBookDept/getDeptByAbId', {}).then((res) => {
        if (res.code === 200) {
          let list = res.result
          let result = this.getTreeDataByList(list, '0', '')
          this.treeData = [
            {
              id: '',
              label: '全部',
              children: result,
            },
          ]
        }
      })
    },
    getTreeDataByList (list, parentId, parentName) {
      let data = []
      for (let index = 0; index < list.length; index++) {
        const element = list[index]
        if (element.parentId == parentId) {
          data.push({
            ...element,
            id: element.id,
            parentId,
            label: element.deptName,
            children: this.getTreeDataByList(list, element.id, element.deptName),
          })
        }
      }
      return data
    },
    // 获取表格数据
    getTableData (page) {
      let data = {
        ...this.queryData,
        pageSize: this.pagesize,
        pageNo: page || 1,  //只有切换页码时这个值会变化，其他触发都是第一页
      }
      getAction(this.url.userList, data).then((res) => {
        if (res.code === 200) {
          let result = res.result
          result.records.forEach((item) => {
            item.isAllowLogin = item.isAllowLogin == 1 ? true : false
            item.roleName = item.roleNameGroup
          })
          this.tableData = result
        }
      })
    },
    // 提醒弹框确认后操作
    onYes (mark) {
      if (mark == 'onBatchDelete') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        console.log(ids, 'ids')
        postAction('/dept/xghAccountBookDept/delAccountBookUser', {
          id: ids.toString(),
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onDeleteRow') {
        let data = {
          id: this.nowDataId,
        }
        postAction('/dept/xghAccountBookDept/delAccountBookUser', data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onBatchChangeStatus') {
        let ids = []
        this.batchData.forEach((item) => {
          ids.push(item.id)
        })
        postAction('/dept/xghAccountBookDept/editAccountBookUserStatus', {
          xghSysUserId: ids.toString(),
          isAllowLogin: this.nowStatus == '启用' ? 1 : 0,
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTableData()
          } else {
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onChangeStatus') {
        postAction('/dept/xghAccountBookDept/editAccountBookUserStatus', {
          xghSysUserId: this.nowData.id,
          isAllowLogin: this.nowData.isAllowLogin ? 1 : 0,
        }).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
          } else {
            this.nowData.isAllowLogin = !this.nowData.isAllowLogin
            this.$elMessage.error(res.message)
          }
        })
      } else if (mark == 'onDeleteTree') {
        let data = {
          id: this.nowTreeId,
        }
        postAction('/dept/xghAccountBookDept/delete', data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.getTreeData()
            // this.editTreeDataSta = true
          } else {
            this.$elMessage.error(res.message)
          }
        })
      }
    },
    // 提醒弹框确认后操作
    onNo (mark) {
      if (mark == 'onChangeStatus') {
        this.tableData.records.forEach((item) => {
          if (item.id == this.nowData.id) {
            item.isAllowLogin = !item.isAllowLogin
          }
        })
      }
    },
    // 新增
    handleShortcutKeyAdd () {
      this.onShowAdd()
    },
    // 打开新增数据弹框
    onShowAdd () {
      if (!this.buttonsPermissions.XinZeng) {
        this.$elMessage.warning('未拥有新增权限！')
        return
      }
      this.newData = JSON.parse(JSON.stringify(this.defaultData))
      this.newData.userDeptId = this.queryData.deptId
      // this.$refs.staffAddRef.newData = JSON.parse(JSON.stringify(this.newData))
      this.$refs.staffAddRef.dialogVisible = true
      this.nowDataStatus = 'add'
    },
    // 批量启用禁用数据
    onBatchChangeStatus (val) {
      if (this.batchData.length) {
        this.nowStatus = val
        this.tipsData.tipsWords = `是否确认${this.batchData.length > 1 ? '批量' : ''}${val}?`
        this.tipsData.tipsMark = 'onBatchChangeStatus'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        // this.$elMessage.error(`请先选择需要${val}的数据！`)
        this.$elMessage({
          showClose: true,
          message: `请先选择需要${val}的数据！`,
          type: 'error',
          iconClass: 'el-icon-warning-outline',
          duration: 3000,
        })
      }
      this.enableValue = '启用'
    },
    // 批量删除数据
    onBatchDelete () {
      if (this.batchData.length) {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认批量删除?'
        this.tipsData.tipsMark = 'onBatchDelete'
        this.$refs.reminderRef.dialogVisible = true
      } else {
        this.$elMessage.error('请先选择需要删除的数据！')
      }
    },
    // 搜索
    onQuery () {
      this.getTableData()
    },
    // 刷新
    onRefresh () {
      Object.assign(this.$data, this.$options.data())
      this.selectTitle()
      this.getTreeData()
    },
    // 搜索树形结构数据
    onSelectTree () {
      this.getTreeData()
    },
    // 触发树形当前节点
    handleNodeClick (data) {
      if (this.editTreeDataSta) {
        //非编辑状态
        if (this.queryData.deptId != data.id) {
          this.queryData.deptId = data.id == 0 ? undefined : data.id
          this.getTableData()
        }
      } else {
        this.nowLabel = data.id
      }
    },
    // 触发新增树形节点按钮
    onAddTree (data) {
      this.newTreeData = {
        data: data,
        state: 'add',
        module: {
          name: 'deptName', //类别名称字段
          code: 'deptCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'backup', //备注字段
        },
        getTreeUrl: '/dept/xghAccountBookDept/getDeptByAbId', //获取类别接口
        deleteTreeUrl: '/xgh/section/deleteById', //删除类别接口
        addTreeUrl: '/dept/xghAccountBookDept/add', //新增类别接口
        editTreeUrl: '/xgh/section/edit', //修改类别接口
      }
      this.showNewTree = true
    },
    // 触发修改树形节点按钮
    onEditTree (node, data) {
      this.newTreeData = {
        data: data,
        state: 'edit',
        module: {
          name: 'deptName', //类别名称字段
          code: 'deptCode', //类别编码字段
          pyCode: 'pinYinCode', //类别拼音码字段
          indexCode: 'backup', //备注字段
        },
        getTreeUrl: '/dept/xghAccountBookDept/getDeptByAbId', //获取类别接口
        deleteTreeUrl: '/xgh/section/deleteById', //删除类别接口
        addTreeUrl: '/xgh/section/add', //新增类别接口
        editTreeUrl: '/dept/xghAccountBookDept/edit', //修改类别接口
      }
      this.showNewTree = true
    },
    // 类别信息新增/修改后数据获取
    onSaveTreeChanges () {
      this.getTreeData()
      this.showNewTree = false
      // this.editTreeDataSta = true
    },
    // 类别信息取消按钮触发
    onCancelTree () {
      this.showNewTree = false
    },
    // 触发删除树形节点按钮
    onDeleteTree (data) {
      if (data.children.length) {
        this.$elMessage.warning('类别下级有分类，不允许删除！')
      } else {
        this.tipsData.tipsState = 'delete'
        this.tipsData.tipsWords = '是否确认删除?'
        this.tipsData.tipsMark = 'onDeleteTree'
        this.$refs.reminderRef.dialogVisible = true
        this.nowTreeId = data.id
      }
    },
    // 触发表格修改按钮
    onEditRow (val) {
      // val.companyInvoiceStatus = val.companyInvoiceStatus == 0 ? true : false
      // val.companyRAndPStatus = val.companyRAndPStatus == 0 ? true : false
      let str = JSON.stringify(val)
      let obj = JSON.parse(str)
      obj.userRoleId = obj.userRoleId && obj.userRoleId.split(',')
      this.newData = obj
      this.nowDataStatus = 'edit'
      setTimeout(() => {
        this.$refs.staffAddRef.dialogVisible = true
      }, 200);
    },
    // 删除当前行
    onDeleteRow (row) {
      this.tipsData.tipsState = 'delete'
      this.tipsData.tipsWords = '是否确认删除?'
      this.tipsData.tipsMark = 'onDeleteRow'
      this.$refs.reminderRef.dialogVisible = true
      this.nowDataId = row.id
    },
    //
    onChangeStatus (val) {
      this.nowData = val
      this.tipsData.tipsWords = '是否确认' + (val.isAllowLogin == '1' ? '启用' : '停用') + '?'
      this.tipsData.tipsMark = 'onChangeStatus'
      this.$refs.reminderRef.dialogVisible = true
    },
    // 获取新增/修改员工数据
    onAddStaff (data) {
      console.log(data)
      let userInfo = Vue.ls.get(USER_INFO)
      // 如果当前是修改表格数据
      let url = ''
      if (this.nowDataStatus == 'edit') {
        url = '/dept/xghAccountBookDept/editAccountBookUser'
      } else if (this.nowDataStatus == 'add') {
        url = '/dept/xghAccountBookDept/addAccountBookUser'
      }
      postAction(url, data).then((res) => {
          if (res.code === 200) {
            this.$elMessage.success(res.message)
            this.$refs.staffAddRef.dialogVisible = false
            this.nowDataStatus = ''
            this.getTableData()
            this.newData = this.$options.data().newData
            if (data.id && data.id == userInfo.id) {
              Vue.ls.set(USER_INFO, data, 7 * 24 * 60 * 60 * 1000);
              this.$EventBus.$emit('changeUserInfo')
            }
          } else {
            this.$elMessage.error(res.message)
          }
        })
    },
    // 关闭新增往来单位时清空
    onCloseAddStaff () {
      this.getData()
      this.newData = this.$options.data().newData
    },
    // 获取每页几条数据
    handleSizeChange (val) {
      this.pagesize = val
      this.getTableData()
    },
    // 获取当前第几页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getTableData(val)
    },
    // 触发表格多选按钮
    handleSelectionChange (val) {
      this.batchData = val
    },
    // 触发列配置弹框
    onShowColumn () {
      this.defaultColumnData = this.$options.data().columnData
      this.$refs.setColumnRef.dialogVisible = true
    },
    // 导入数据
    importExcel () {
      this.$refs.daoru.dialogVisible = true
    },
    importData (res) {
      this.tipsData.tipsWords = res.message
      this.$refs.successImportRef.dialogVisible = true
      this.getData()
    },
    // 导出数据
    exportExcel () {
      let list = []
      // if (this.batchData && this.batchData.length > 0) {
      //   for (let index = 0; index < this.batchData.length; index++) {
      //     const element = this.batchData[index]
      //     list.push(element.id)
      //   }
      // } else {
      //   this.$elMessage.warning('请选择想要导出的数据！')
      //   return
      // }
      let queryParam = {
        fileName: '员工列表',
        selections: list.join(','),
      }
      this.handleExportXlsByStaff('员工列表', queryParam)
    },
  },
}
</script>

<style lang="scss" scoped>
.basic_info {
  width: 100%;
  height: calc(100vh - 1.875117rem);
  background: #f0f2f5;
  box-sizing: border-box;
  padding: 0 0.168761rem 0.168761rem;
  display: flex;
  flex-direction: column;
}
.info_operation_btn {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  .el-button {
    width: 70px;
    height: 30px;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 0.1rem;
    border: none;
    margin-right: 0.187512rem;
  }
  .el-button--default {
    color: #666;
  }
  .btn_left {
    width: 60%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    p {
      font-size: 12px;
      color: #666;
      margin: 0 0.1rem 0 0.187512rem;
    }
    ::v-deep .el-checkbox__label {
      font-size: 12px;
      padding-left: 0.1rem;
    }
    ::v-deep .el-select {
      width: 70px;
      height: 30px;
      box-sizing: border-box;
      margin-right: 0.187512rem;
      .el-input {
        .el-input__inner {
          height: 30px;
          border: none;
          font-size: 12px;
        }
        .el-input__suffix {
          height: 30px;
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .btn_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .el-input {
      width: 4.725295rem;
      height: 30px;
      margin-right: 0.112507rem;
      ::v-deep .el-input__inner {
        height: 30px;
        border: none;
        box-sizing: border-box;
        padding: 0 0.15rem;
        background: #fff;
        font-size: 12px;
        color: #666;
        &::placeholder {
          font-size: 12px;
          color: #c1c1c1;
        }
      }
    }
    .el-button {
      width: 70px;
      margin-left: 0;
    }
    .set_up {
      font-size: 23px;
      color: rgb(153, 153, 153);
    }
  }
}
.info_content_div {
  width: 100%;
  height: calc(100% - 1rem);
  background: #fff;
  box-sizing: border-box;
  padding: 0.168761rem;
  display: flex;
  .div_tree {
    width: 2.812676rem;
    height: calc(100% - 1rem);
    box-sizing: border-box;
    padding: 0.131258rem 0;
    border: 0.018751rem solid #e3e3e3;
    transition: all 0.3s;
    .tree_div1 {
      width: 100%;
      height: 0.337521rem;
      box-sizing: border-box;
      padding: 0 0.168761rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      p {
        color: #666666;
        font-size: 12px;
        &:last-child {
          color: #1b93f9;
        }
      }
      .el-button {
        width: 70px;
        height: 0.375023rem;
        text-align: center;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border-radius: 0;
        border: none;
      }
    }
    .tree_input {
      width: 100%;
      // height: 30px;
      height: 30px;
      margin-top: 0.131258rem;
      box-sizing: border-box;
      padding: 0 0.168761rem;
      p {
        width: 100%;
        // height: 30px;
        height: 30px;
        margin: 0;
        box-sizing: border-box;
        border: 1px solid #dddddd;
        display: flex;
        align-items: center;
        position: relative;
        input {
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.6rem 0 0.1rem;
          // height: 30px;
          height: 28px;
          border: none;
          font-size: 12px;
          &:focus {
            outline: none;
          }
        }
        span {
          position: absolute;
          right: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 0.55rem;
          height: 28px;
          background: #fff;
          .el-icon-search {
            font-size: 0.25rem;
            color: rgb(211, 211, 211);
          }
        }
      }
    }
    .tree_structure {
      width: 100%;
      height: calc(100% - 0.337521rem - 0.131258rem - 0.131258rem - 0.55rem);
      box-sizing: border-box;
      padding: 0 0.168761rem;
      margin-top: 0.131258rem;
      overflow: auto;
      ::v-deep .el-tree {
        width: 100%;
        .tree_node {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          span {
            font-size: 12px;
          }
          .show_nodex {
            font-size: 0.25rem;
            i {
              margin-right: 0.15rem;
              font-weight: 600;
            }
            .el-icon-circle-plus-outline {
              color: #1993fb;
            }
            .el-icon-edit-outline {
              color: #1993fb;
            }
            .el-icon-delete {
              color: #ff2626;
            }
          }
        }
        .el-tree-node__children {
          .el-tree-node__label {
            color: #666;
            font-weight: normal;
          }
        }
        .el-tree-node__label {
          font-size: 12px;
          font-weight: 600;
        }
        .is-current {
          .el-tree-node__content {
            background-color: #e6f7ff;
          }
        }
        .el-tree-node__content > .el-tree-node__expand-icon {
          padding-left: 0;
        }
      }
    }
  }
  .new_div_tree_width {
    width: 4.125258rem;
  }
  .div_table {
    width: calc(100% - 3rem);
    height: 100%;
    margin-left: 0.187512rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;
    .table_content {
      height: calc(100% - 1.687605rem);
      ::v-deep .el-table {
        border: 1px solid #e3e3e3;
        border-bottom: none;
        box-sizing: border-box;
        th,
        td {
          padding: 0;
          color: #666;
          box-sizing: border-box;
          border-right: 1px solid #e3e3e3;
          .cell {
            min-height: 30px;
            display: flex;
            align-items: center;
            font-size: 12px;
          }
          &:first-child {
            .cell {
              justify-content: center;
              padding: 0;
            }
          }
          &:nth-child(2) {
            .cell {
              justify-content: center;
            }
          }
          &:last-child {
            .cell {
              justify-content: center;
            }
          }
        }
        th {
          .cell {
            background: #ededed;
            justify-content: center;
          }
        }
        .el-checkbox {
          .is-indeterminate {
            .el-checkbox__inner {
              color: #1b93f9;
              background-color: #1b93f9;
              border-color: #1b93f9;
            }
          }
        }
        .el-icon-edit-outline {
          font-size: 20px;
          color: #1b93f9;
          margin-right: 0.037502rem;
        }
        .el-icon-delete {
          font-size: 20px;
          color: #ff2626;
          margin-left: 0.037502rem;
        }
        .el-table__body tr:hover > td {
          background: #e3f6ff;
        }
        .el-table__footer-wrapper {
          td {
            background: #f4f4f4;
            border: none;
          }
        }
        //滚动条的宽度
        ::-webkit-scrollbar {
          width: 8px;
          height: 10px;
          background-color: #e5e5e5;
        }
        //滚动条的滑块
        ::-webkit-scrollbar-thumb {
          background-color: #c9c9c9;
        }
      }
    }
    .total_record {
      width: 100%;
      height: 30px;
      box-sizing: border-box;
      padding: 0 0.25rem;
      border: 1px solid #e3e3e3;
      border-top: none;
      background: #f4f4f4;
      display: flex;
      p {
        margin: 0;
        line-height: 30px;
        padding-right: 0.25rem;
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #666666;
      }
    }
    .table_pagination {
      width: 100%;
      height: 50px;
      box-sizing: border-box;
      padding: 0.168761rem 0;
      display: flex;
      .pagination_div {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        ::v-deep .el-pagination {
          padding: 0;
          height: 30px;
          .el-pagination__sizes {
            margin: 0;
            .el-input {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
  .new_div_table_width {
    width: calc(100% - 4.31277rem);
  }
}
.disabled_button {
  background: #cbced3 !important;
  color: #666 !important;
}
</style>
